<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"  %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>学校信息</title>
		<meta http-equiv="Content-Type" content="${aier_content_type}" />
		<meta name="keywords" content="${aier_keyworks}" />
		<meta name="description" content="${aier_description}" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />	
		
		
<!-- basic styles -->
		<link href="${aier_new_css_url}assets/stylesheets/bootstrap/bootstrap.css" rel="stylesheet" />
		<link rel="stylesheet" href="${aier_new_css_url}assets/stylesheets/font-awesome.min.css" />
		<!-- page specific plugin styles -->

		<link rel="stylesheet" href="${aier_new_css_url}assets/stylesheets/jquery_ui/jquery-ui-1.10.3.full.min.css" />
		<link rel="stylesheet" href="${aier_new_css_url}assets/stylesheets/plugins/jqgrid/ui.jqgrid.css" />
		<!-- fonts -->
        <link rel="stylesheet" href="${aier_new_css_url}assets/stylesheets/ace.min.css" />
		<link rel="stylesheet" href="${aier_new_css_url}assets/stylesheets/ace-rtl.min.css" />
		<link rel="stylesheet" href="${aier_new_css_url}assets/stylesheets/ace-skins.min.css" />
		<link rel="stylesheet" href="${aier_new_css_url}zTreeStyle/zTreeStyle.css"  type="text/css"/>
		<link rel='stylesheet' href="${aier_new_css_url}admin/comwap.css"  type='text/css'  />
	
</head>
<body style="background-color: white;">
<!-- 顶栏   -->
	<s:action name="userhomecomm_homeHead" namespace="/user" executeResult="true"></s:action>
<!-- 顶栏结束 -->
	    <br>
		<div class="container-fluid" style="margin-top: 90px;">
		<!-- wrap  -->
			<div class="row-fluid">
				<div class ='span1'style="margin-left: 150px; height: 700px;">
					<!--菜单栏  -->
					<s:action name="menus_schoolMenus" namespace="/nxadmin" executeResult="true" ></s:action>
					<!--菜单栏结束  -->
				</div>
				
				<!-- 主区域 (右  -->
				<div class="span9" style="margin-left:70px;" >				
							<div class="right-main-top" style="font-size: 16px;">
								<div ><a>&nbsp;&nbsp;&nbsp;</a><strong style="margin-top: 20px;margin-top: 10px;">组织架构</strong></div>
							</div>
							<br>
							
							<div>
								<div class="row" >
									<span class="span5" style="margin-left: 25px;" >共有50人</span>		
									<span class="span1 offset8"><a class="text-success">新手引导</a></span>			
								</div>
								
								<div class="row" style="margin-top: 10px;">
									<div class="span2" style="margin-left: 20px;" ><a  class="">创建职务</a></div>
									<div class="span2" style="margin-left: 10px;" >
											<ul class=""><p>导入 / 导出</p>
											</ul>
									</div>
									<div class="span2"  ><a  class=""><i class="icon-plus-sign purple"></i>添加成员</a></div>
									<div class="span2"  ><a  class=""><i class="icon-trash red"></i>解雇成员</a></div>
								</div>
								<br>
								
								<div class="row">
									<div class="span3" style="margin-left: 15px;">
										<div class="">
											<input type="text" placeholder="输入搜索内容">
										</div>
										
										<div  style="border:1px solid ;height: 450px; width: 215px;">
											<ul id="tree" class="ztree"></ul>
										</div>
									</div>
									
									<div class="span7">
												<!-- 表格 -->
												<table id="grid-table"></table>
												<div id="grid-pager"></div>
									</div>
								</div>
							</div>
				</div>	
	</div>
</div>

    <script src="${aier_new_js_url}assets/jquery/jquery-1.9.0.min.js"></script>
	<script src="${aier_new_js_url}assets/bootstrap/bootstrap.min.js"></script>
	<script src="${aier_new_js_url}assets/jquery_ui/jquery-ui.min.js" type="text/javascript" > </script> 
	<script src="${aier_new_js_url}assets/jquery_ui/jquery-ui-1.10.0.custom.min.js" type="text/javascript" > </script> 
	<script src="${aier_new_js_url}assets/jquery/jquery.ztree.all-3.5.js"    type="text/javascript"></script>
	<script src="${aier_new_js_url}assets/plugins/jqgrid/jquery.jqGrid.src.js"></script>
    <script src="${aier_new_js_url}assets/plugins/jqgrid/cn.js"></script>

	
	<script type="text/javascript">

	var zNodes ="";
	 var zTree;
	 var setting = {
	 view:{
	 selectedMulti:false
	 },
	 edit: {
	 enable: true,
	 editNameSelectAll:true,
	 removeTitle:"删除",
	 renameTitle:"重命名"
	},
	data: {
	 keep:{
	 parent:true,
	 leaf:true
	 },
	 simpleData: {
	 	enable: true
	 	}
	 },
	 callback:{
	 	beforeRemove:beforeRemove,//点击删除时触发，用来提示用户是否确定删除
		beforeEditName: beforeEditName,//点击编辑时触发，用来判断该节点是否能编辑
		beforeRename:beforeRename,//编辑结束时触发，用来验证输入的数据是否符合要求
		onRemove:onRemove,//删除节点后触发，用户后台操作
		onRename:onRename,//编辑后触发，用于操作后台
		beforeDrag:beforeDrag,//用户禁止拖动节点
		onClick:clickNode//点击节点触发的事件
		}
	 };
	
	 function initMyZtree(){  
		    $.ajax({   
		    	url: '${aier_url}${aier_urijs}schoolchart_getZtreeData${aier_suffix}?id=${sid}',  
		        type: "POST",                 
		        dataType: "json",                 
		        success: function(data) {     
		            zNodes=data.treeList;  
		            zTree=$.fn.zTree.init($("#tree"), setting, zNodes);  
		        }     
		    });    
		      
		}  
	 
	 
	 $(document).ready(function(){
		 initMyZtree();
	 });
	 
	 function beforeRemove(e,treeId,treeNode){
		 
	 return confirm('你确定要删除吗？');
	 
	 }
	 
	function onRemove(e,treeId,treeNode){
		
		 if(treeNode.isParent){
			 var childNodes = zTree.removeChildNodes(treeNode);
			 var paramsArray = new Array();
			 for(var i = 0; i < childNodes.length; i++){
			 paramsArray.push(childNodes[i].id);
		 
		 }
			 alert('删除父节点的id为：'+treeNode.id+'\r\n他的孩子节点有：'+paramsArray.join(','));
			return;
		 }
		 alert('你点击要删除的节点的名称为：'+treeNode.name+'\r\n'+'节点id为：'+treeNode.id);
	 }
	
	
	 function beforeEditName(treeId,treeNode){
		 if(treeNode.isParent){
				 alert('不准编辑非叶子节点！');
				return false;
	 		}
	 	return true;
	 }
	 
	 function beforeRename(treeId,treeNode,newName,isCancel){
		 if(newName.length < 3){
		 	alert('名称不能少于3个字符！');
			return false;
		 }
	 	return true;
	 }
	 	
	 function onRename(e,treeId,treeNode,isCancel){
	 	alert('修改节点的id为：'+treeNode.id+'\n修改后的名称为：'+treeNode.name);
	 }
	 
	 function clickNode(e,treeId,treeNode){
		 if(treeNode.id == 11){
		 location.href=treeNode.url;
		 }
	 }
	 
	 function beforeDrag(treeId,treeNodes){
	 	return false;
	 }
	
</script>

<script type="text/javascript">
						
			jQuery(function($) {
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
			
				jQuery(grid_selector).jqGrid({
					//direction: "rtl",
					url:'${aier_url}${aier_urijs}schoolchart_getSchoolTeahersList${aier_suffix}',
					data:{"sid":${sid}},
					datatype:"json",                
					mtype : "post", //提交类型
					height: 380,
					width:'650',
					colNames:[ 'tid','名字', '职务', '角色','手机',' '],
					colModel:[
						{name:'tid',index:'id', hidden : true},
						{name:'tname',index:'tname',width:80,align:'center',sortable:false,editable: true,editoptions:{size:"20",maxlength:"30"}},
						{name:'gname',index:'gname',width:70,align:'center',sortable:false, editable: true,editoptions:{size:"20",maxlength:"30"}},
						{name:'rname',index:'ship', width:90,sortable:false, editable: true,editoptions:{size:"20",maxlength:"30"}},
						{name:'phone',index:'phone',width:100, sortable:false,align:'center',editable: true,edittype:"int"},
						
						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter:'actions', 
							formatoptions:{ 
								keys:true,
								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
							}
						}
					], 
					
					jsonReader: {
						root:"teacherList",
						page: "page",
						total: "page_count",
						records : "count",
						repeatitems: false
			        },
					viewrecords : true,
					rowNum:10,
					pager : pager_selector,
					prmNames : {page:"page",sort: "sort"},
					sortname: 'tid',
					altRows: true,
			        multiboxonly: true,
					/*loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},*/
					
					editurl:"",//nothing is saved

					//autowidth: true
			
				});
				//enable search/filter toolbar
			
				//switch element when editing inline
				function aceSwitch( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=checkbox]')
								.wrap('<label class="inline" />')
							.addClass('ace ace-switch ace-switch-5')
							.after('<span class="lbl"></span>');
					}, 0);
				}
				
			
			
				//navButtons
				jQuery(grid_selector).jqGrid('navGrid',pager_selector,
					{ 	//navbar options
						edit: false,
						editicon : 'icon-pencil blue',
						add: false,
						addicon : 'icon-plus-sign purple',
						del: false,
						delicon : 'icon-trash red',
						search: false,
						searchicon : 'icon-search orange',
						refresh: true,
						refreshicon : 'icon-refresh green',
						view: true,
						viewicon : 'icon-zoom-in grey',
					},
					{
						//edit record form
						//closeAfterEdit: true,
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//new record form
						closeAfterAdd: true,
						recreateForm: true,
						viewPagerButtons: false,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//delete record form
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							if(form.data('styled')) return false;
							
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_delete_form(form);
							
							form.data('styled', true);
						},
						onClick : function(e) {
							alert(1);
						}
					},
					{
						//search form
						recreateForm: true,
						afterShowSearch: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
							style_search_form(form);
						},
						afterRedraw: function(){
							style_search_filters($(this));
						}
						,
						multipleSearch: true,
						/**
						multipleGroup:true,
						showQuery: true
						*/
					},
					{
						//view record form
						recreateForm: true,
						beforeShowForm: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
						}
					}
				)
			
			
				
				function style_edit_form(form) {
			
					//update buttons classes
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>')
					
					buttons = form.next().find('.navButton a');
					buttons.find('.ui-icon').remove();
					buttons.eq(0).append('<i class="icon-chevron-left"></i>');
					buttons.eq(1).append('<i class="icon-chevron-right"></i>');		
				}
			
				function style_delete_form(form) {
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>')
				}
				
				function style_search_filters(form) {
					form.find('.delete-rule').val('X');
					form.find('.add-rule').addClass('btn btn-xs btn-primary');
					form.find('.add-group').addClass('btn btn-xs btn-success');
					form.find('.delete-group').addClass('btn btn-xs btn-danger');
				}
				function style_search_form(form) {
					var dialog = form.closest('.ui-jqdialog');
					var buttons = dialog.find('.EditTable')
					buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
					buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
					buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
				}
				
				function beforeDeleteCallback(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;
					
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_delete_form(form);
					
					form.data('styled', true);
				}
				
				function beforeEditCallback(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}
			
			
			
				//it causes some flicker when reloading or navigating grid
				//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
				//or go back to default browser checkbox styles for the grid
				function styleCheckbox(table) {
					/*
						$(table).find('input:checkbox').addClass('ace')
						.wrap('<label />')
						.after('<span class="lbl align-top" />')
				
				
						$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
						.find('input.cbox[type=checkbox]').addClass('ace')
						.wrap('<label />').after('<span class="lbl align-top" />');
					*/
				}
				
			
				//unlike navButtons icons, action icons in rows seem to be hard-coded
				//you can change them like this in here if you want
				function updateActionIcons(table) {
					/**
					var replacement = 
					{
						'ui-icon-pencil' : 'icon-pencil blue',
						'ui-icon-trash' : 'icon-trash red',
						'ui-icon-disk' : 'icon-ok green',
						'ui-icon-cancel' : 'icon-remove red'
					};
					$(table).find('.ui-pg-div span.ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
					*/
				}
				
				//replace icons with FontAwesome icons like above
				function updatePagerIcons(table) {
					var replacement = 
					{
						'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
						'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
						'ui-icon-seek-next' : 'icon-angle-right bigger-140',
						'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
					};
					$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
				}
			
				function enableTooltips(table) {
					$('.navtable .ui-pg-button').tooltip({container:'body'});
					$(table).find('.ui-pg-div').tooltip({container:'body'});
				}
			
				//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
			});
		</script>
</body>
</html>
